body{
  background-color:#F3F2F0;
}

.but2{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    background-color:#5C5B44;
    float:left;
    height:40px;
    margin:1px;
    overflow:hidden;
    padding-left:20px;
    position:relative;
    text-decoration:none;

    transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
}
.but2 .title{
    color:#FFFFFF;
    display:block;
    float:left;
    font-size:18px;
    font-weight:bold;
    line-height:40px;

    transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
}
.but2 .extra{
    background-color:#A3A27F;
    color:#FFFFFF;
    float:left;
    font-size:14px;
    line-height:40px;
    opacity:0;
    position:relative;
    text-transform:uppercase;
    width:0px;

    transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
}
.but2 .extra span, .but2 .extra a{
    display:none;
}
.but2 .icon{
    background:transparent url(http://sites.google.com/a/santaanaac.org.mx/santaanaac/right.png) no-repeat center center;
    float:left;
    height:40px;
    width:40px;

    transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
}
.but2:hover .extra span, .but2:hover .extra a{
    display:inline-block;
	color:#FFFFFF;
}
.but2:hover .extra{
    margin-left:10px;
    opacity: 1;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
    width:auto;
}
.but2:hover .icon{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}